<template>
    <UxDialog class="mockups-dialog" :visible="!!value" :full-screen="true" :before-close="beforeClose">

        <template v-if="value">

            <!-- 预览 -->
            <div class="mockups-preview" :active="type == 'preview'">
                <div class="mockups-preview-warp" v-if="mockupPreview">
                    <SynchronizeMockupsPreview :mockup="mockupPreview" size="preview" />
                </div>
                <button @click="setPreviewActive(active - 1)" class="el-icon-arrow-left" :disabled="active <= 0"></button>
                <button @click="setPreviewActive(active + 1)" class="el-icon-arrow-right"
                        :disabled="active >= mockups.length - 1"></button>
            </div>

            <!-- 颜色尺码 -->
            <div class="mockups-choose" :active="type == 'edit'">
                <!-- 选中 -->
                <h3>
                    <strong>Choose images</strong>
                    <span>Select the images to display in your store.</span>
                </h3>
                <div class="mockups-choose-scroller">

                    <dl v-for="(product, index) in clothesFormat" :key="product.design_id">
                        <dt>
                            <img v-if="index == 0" src="@/assets/images/synchronize/synchronize-title.png" alt="">
                            <img v-if="index == 1" src="@/assets/images/synchronize/synchronize-title2.png" alt="">
                            <span v-text="product.title"></span>
                            <SynchronizeMockupsTags :classify="product.classify"
                                                    @select="openClassify(product, $event)" />
                        </dt>

                        <dd v-for="classify in product.classify" :key="classify.model_tag"
                            :class="{ active: classify.show }">
                            <span v-text="classify.model_name || getTagName(classify.model_tag)"></span>
                            <em @click="hideClassify(product, classify)"><svg-icon name="remove" /></em>

                            <div class="mockups-choose-mockup" v-for="model in classify.models" :key="model.id"
                                 @click="classify.model_id = model.id">
                                <CommonTemplatePreview :baseModel="model" :baseColor="classify.colors[0]" size="largest"
                                                       :active="model.id == classify.model_id" />
                            </div>
                            <div class="mockups-choose-colors">
                                <blockquote v-for="item in classify.colors" :key="item.color_id"
                                            @click="setColorActive(product.design_id, classify.model_id, item.color_id)">
                                    <CommonColorBlock :color="item"
                                                      :active="getColorActive(product.design_id, classify.model_id, item.color_id)" />
                                </blockquote>
                            </div>
                        </dd>

                        <dd class="mockups-choose-nodata" v-if="product.classify.filter(c => c.show).length == 0">
                            <svg-icon name="user-template" />
                        </dd>
                    </dl>

                </div>
                <div class="mockups-choose-size" :visible="sizeMockups.length < clothes.length">
                    <span @click="insertSizes()">Add size table to {{ shop.platform }} photos</span>
                </div>

            </div>

            <!-- 选择图片 -->
            <div class="mockups-selected">
                <h3>
                    <strong v-text="type == 'preview' ? 'Other images' : 'Images selected'"></strong>
                    <span style="flex:1"></span>
                    <span>
                        <em :error="mockups.length > limit" v-text="mockups.length"></em>
                        <b v-text="limit"></b>
                    </span>
                    <el-tooltip placement="top">
                        <div slot="content">You can sync up to {{ limit }} images to your {{ shop.platform }} store,<br>
                            including the primary image and size chart.</div>
                        <svg-icon name="notify" />
                    </el-tooltip>
                </h3>

                <div class="mockups-selected-wapper" :type="type">
                    <div class="mockups-selected-scroller" :count="mockups.length">
                        <blockquote v-for="(mockup, index) in mockups"
                                    :key="[mockup.type, mockup.design_id, mockup.color_id, mockup.model_id].join('-')">
                            <SynchronizeMockupsPreview :mockup="mockup" />
                            <a @click="setPrimary($event, mockup)">Primary image</a>
                            <del @click="removeMockup(mockup)"><svg-icon name="remove" /></del>
                            <cite @click="setPreviewActive(index)"></cite>
                        </blockquote>
                    </div>

                    <div class="mockups-selected-nodata" v-if="mockups.length == 0">
                        <svg-icon name="user-template" />
                    </div>

                    <div class="mockups-selected-notify" :class="{ active: notify }">
                        <cite>
                            <img src="@/assets/images/synchronize/synchronize-exceed.png" alt="">
                            <span>According to {{ shop.platform }}, you may sync up to {{ limit }} images to your
                                store.</span>
                            <button @click="notify = false">Got it</button>
                        </cite>
                    </div>
                </div>

                <div class="mockups-selected-action">
                    <button type="primary" v-if="type == 'preview'" @click="type = 'edit'">Edit</button>
                    <button type="primary" v-else v-show="changed" @click="doSubmit()">Save</button>
                </div>
            </div>
        </template>

        <!-- 离开弹窗 -->
        <UxDialog :visible="exit" @close="exit = false">
            <div class="mockups-exit">
                <figure><img src="@/assets/images/synchronize/synchronize-exit.png" alt=""></figure>
                <p>
                    <strong>Are you sure you want to leave the current page?</strong>
                    <span>Once leave,changes that you made may not be saved.</span>
                </p>
                <fieldset>
                    <button @click="beforeClose(true)">Leave</button>
                    <button @click="exit = false" type="primary">Stay</button>
                </fieldset>
            </div>
        </UxDialog>

    </UxDialog>
</template>
<script>
import { mapState } from "vuex";
export default {
    props: {
        value: { type: Object, default: () => (null) },
    },
    data () {
        return {
            type: '',
            active: 0, // 预览界面
            clothesFormat: [],
            cache: '',
            exit: false,
            notify: false,
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            shop: "shop",
        }),
        limit () {
            return parseInt((this.shop || {}).img_limit || 0)
        },
        mockups () {
            return (this.value || {}).mockups || []
        },
        sizeMockups () {
            return this.mockups.filter(m => m.type == 'size');
        },
        mockupPreview () {
            const index = Math.min(this.mockups.length - 1, Math.max(0, this.active))
            return this.mockups[index];
        },
        changed () {

            if (this.mockups.length > 0) {
                return JSON.stringify(this.mockups) != this.cache;
            } else {
                return false;
            }
        },
    },
    watch: {
        value (newval, oldval) {
            if (!!newval && !oldval) {

                // 添加尺码
                if (newval.type == 'size') {
                    // 先缓存
                    this.cache = JSON.stringify(this.mockups || [])
                    this.insertSizes()
                    this.init();
                    this.notify = this.mockups.length > this.limit;
                } else if (newval.type == 'preview') {
                    // 预览
                    this.type = 'preview';
                    this.notify = false;
                    this.init();
                    this.active = newval.active;
                    this.cache = JSON.stringify(newval.mockups || [])
                } else {
                    this.type = 'edit'
                    this.notify = false;
                    this.init();
                    this.cache = JSON.stringify(newval.mockups || [])
                }

            }
        }
    },

    methods: {

        init () {
            const select_map = new Map(this.mockups.map(m => [[m.design_id, m.model_id, m.color_id].join('-'), m]))
            this.clothesFormat = this.clothes.map(product => {
                const model_list = product.model_list || [];
                const color_list = product.color_list || [];
                const classify = ['hanging', 'flat lay', 'model'].map(tag => {
                    const models = model_list.filter(m => m.model_tag == tag)
                    const model = models[0] || {};
                    const colors = color_list.filter(color => product.select_color.indexOf(color.color_id) >= 0);
                    const select = []
                    models.map(m => colors.map(c => select_map.get([product.design_id, m.id, c.color_id].join('-')) && select.push(c)))
                    return {
                        show: select.length > 0,
                        model_tag: tag,
                        model_name: model.model_name,
                        model_id: model.id,
                        models: models,
                        colors: colors,
                    }
                })

                // 一个都没有显示的情况
                if (classify.filter(c => c.show).length == 0) {
                    const active = classify.find(i => i.models.length > 0)
                    active && (active.show = true);
                }

                return {
                    ...product,
                    classify: classify.filter(i => i.models.length > 0),
                }
            })
        },

        // 标签
        getTagName (tag) {
            const list = new Map([
                ['hanging', 'Hanging'],
                ['flat lay', 'Flat lay'],
                ['model', 'Model'],
            ])
            // return list.get(tag) || 'Hanging'
            return tag
        },


        // 添加尺码
        insertSizes () {
            // 先把原来的尺码给删除了
            const mockups = this.mockups.filter(i => i.type != 'size');
            // 先缓存
            this.clothes.map(product => {
                // 添加尺码
                mockups.push({
                    type: 'size', // 类型： 主图main|普通normal|尺码size
                    design_id: product.design_id,
                    color_id: '',
                    model_id: '',
                });
            })

            this.mockups.splice(0, this.mockups.length, ...mockups)
        },

        // 添加模特
        insertMockup (product, model, color_id) {

            const size_index = this.mockups.findIndex((m, i) => i > 0 && m.type == 'size');
            const space_index = size_index < 0 ? this.mockups.length : size_index;

            this.mockups.splice(space_index, 0, {
                type: 'normal', // 类型： 主图main|普通normal|尺码size
                design_id: product.design_id,
                color_id: color_id,
                model_id: model.id,
            })

        },

        // 选中
        setColorActive (design_id, model_id, color_id) {
            const index = this.mockups.findIndex(m => m.design_id == design_id && m.model_id == model_id && m.color_id == color_id)
            if (index >= 0) {
                this.mockups.splice(index, 1)
            } else {

                const size_index = this.mockups.findIndex((m, i) => i > 0 && m.type == 'size');
                const space_index = size_index < 0 ? this.mockups.length : size_index;
                this.mockups.splice(space_index, 0, {
                    type: 'normal', // 类型： 主图main|普通normal|尺码size
                    design_id: design_id,
                    model_id: model_id,
                    color_id: color_id,
                })

            }
        },

        getColorActive (design_id, model_id, color_id) {
            const index = this.mockups.findIndex(m => m.design_id == design_id && m.model_id == model_id && m.color_id == color_id)
            return index >= 0;
        },

        // 设置头图
        setPrimary (event, mockup) {

            const other = [];
            const sizes = [];
            this.mockups.map(item => {
                if (item == mockup) {
                    // 当前的
                } else if (item.type == 'size') {
                    sizes.push(item)
                } else {
                    other.push(item)
                }
            })

            this.mockups.splice(0, this.mockups.length, ...[mockup, ...other, ...sizes])

        },
        // 删除模型
        removeMockup (mockup) {
            const index = this.mockups.indexOf(mockup);
            if (index >= 0) {
                this.mockups.splice(index, 1)
            }
        },

        // 预览切换
        setPreviewActive (index) {
            this.active = Math.min(this.mockups.length - 1, Math.max(0, index))
        },

        // 打开分类
        openClassify (product, tag) {
            const active = product.classify.find(c => c.model_tag == tag);
            active && (active.show = true);
        },
        // 关闭分类
        hideClassify (product, classify) {

            const map = new Map()
            const models = classify.models;
            const colors = classify.colors;

            models.map(m => colors.map(c => map.set([product.design_id, m.id, c.color_id].join('-'), true)))
            const mockups = this.mockups.filter(i => {
                if (i.type == 'size') {
                    return true;
                } else {
                    return !map.get([i.design_id, i.model_id, i.color_id].join('-'))
                }
            })

            classify.show = false
            this.mockups.splice(0, this.mockups.length, ...mockups)
        },

        // 提交
        doSubmit () {
            if (this.mockups.length > this.limit) {
                this.notify = true;
            } else {
                this.$store.commit("synchronize/SET_MOCKUPS", this.mockups);
                this.$emit('input', null)
            }
        },

        // 关闭
        beforeClose (force) {
            if (!force && this.changed) {
                this.exit = true;
                return false;
            } else {
                this.exit = false;
                this.$nextTick(() => this.$emit('input', null))
            }
        }

    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.mockups-dialog {
    padding: 0 !important;
    background: none !important;

    &::v-deep .dialog-content {
        border-radius: 0;

        .dialog-body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            background: #f6f6f6;
        }
    }

    .mockups-preview {
        position: relative;
        height: 100%;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 100px;
        background: #fff;
        left: -50%;
        pointer-events: none;
        transition: all ease-in 0.5s;
        border-right: 1px solid #ebebeb;

        &>.mockups-preview-warp {
            width: 100%;
            max-width: calc(100vh - 50px);
        }

        &>button {
            position: absolute;
            left: 24px;
            top: 50%;
            width: 52px;
            height: 52px;
            margin-top: -26px;
            background: #fcfcfa;
            opacity: 0.35;
            border: 1px solid #caccc7;
            border-radius: 50px;
            font-size: 24px;
            cursor: pointer;

            &.el-icon-arrow-right {
                left: auto;
                right: 24px;
            }

            &:hover {
                color: #ea4c89;
                opacity: 1;
            }

            &[disabled] {
                cursor: default;
                opacity: 0.8;
                border: 1px solid #ddd;
                color: #ccc;
            }
        }

        .sync-mockups-preview {
            border: none;
        }

        &[active] {
            left: 0;
            opacity: 1;
            pointer-events: all;
        }
    }

    .mockups-choose {
        position: absolute;
        left: -50%;
        top: 0;
        width: 50%;
        height: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 32px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        transition: all ease-in 0.5s;
        background-color: #f6f6f6;

        &>h3 {
            width: 100%;
            max-width: 562px;
            box-sizing: border-box;
            padding: 0 10px;

            strong {
                display: block;
                font-size: 24px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 26px;
            }

            span {
                display: block;
                margin-top: 12px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 16px;
            }
        }

        &::after {
            content: '';
            position: absolute;
            left: 100%;
            margin-left: -50px;
            top: 50%;
            margin-top: -20px;
            border-style: solid;
            border-width: 20px 0 20px 16px;
            border-color: transparent transparent transparent #f6f6f6;
        }

        .mockups-choose-scroller {
            width: 100%;
            max-width: 562px;
            margin-top: 23px;
            padding: 9px 10px 8px;
            max-height: 539px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            overflow: auto;
        }

        dl {
            width: 100%;

            &+dl {
                margin-top: 24px;
            }

            dt {
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 18px;
                display: flex;
                padding: 0 0 2px;

                img {
                    vertical-align: top;
                    width: 18px;
                    height: 18px;
                    margin-right: 4px;
                }

                span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .model-tags {
                    display: block !important;
                    margin-left: 4px;
                    font-size: 12px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #3199bd;
                    cursor: pointer;

                    &::v-deep .model-tags-button {
                        text-decoration: underline;
                    }
                }
            }

            dd {
                display: flex;
                align-items: flex-start;
                background: #ffffff;
                border-radius: 6px;
                border: 1px solid #ebebeb;
                padding: 40px 16px 16px;
                opacity: 0;
                margin-top: 12px;
                position: absolute;
                pointer-events: none;

                &.active {
                    opacity: 1;
                    position: relative;
                    pointer-events: all;
                }

                &>em {
                    position: absolute;
                    right: 12px;
                    top: 12px;
                    width: 24px;
                    height: 24px;
                    padding: 5px;
                    box-sizing: border-box;
                    cursor: pointer;
                    display: none;

                    svg {
                        width: 14px;
                        height: 14px;
                        box-sizing: border-box;
                        color: #555;
                    }

                    &:hover svg {
                        color: #ea4c89;
                    }
                }

                &>span {
                    position: absolute;
                    left: 16px;
                    top: 14px;
                    font-size: 12px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #555555;
                    line-height: 14px;
                }

                &:hover {
                    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.14);

                    .template-preview {

                        &[active='true'],
                        &:hover {
                            border-color: #f6b2cd;

                            &:after {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                border-radius: 3px;
                                border: 1px solid #f6b2cd;
                            }
                        }
                    }

                    &>em {
                        display: block;
                    }
                }

                &.mockups-choose-nodata {
                    position: relative;
                    flex-direction: column;
                    opacity: 1;
                    pointer-events: all;
                    align-items: center;
                    justify-content: center;
                    height: 108px;
                    padding: 0;

                    &:after {
                        content: 'None';
                        font-size: 12px;
                        font-family: Roboto-Regular, Roboto;
                        font-weight: 400;
                        color: #919191;
                        line-height: 12px;
                        margin-top: 8px;
                    }

                    svg {
                        width: 24px;
                        height: 24px;
                        fill: #d9d9d9;
                    }

                    &:hover {
                        box-shadow: none;
                    }
                }
            }
        }

        .mockups-choose-colors {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            position: relative;
            justify-content: flex-start;
            align-items: flex-start;
            padding-top: 26px;
            margin-left: 8px;

            &::before {
                content: 'Color';
                position: absolute;
                left: 0;
                top: 0;
                font-size: 12px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 14px;
            }

            blockquote {
                margin: 0;
                padding: 0;
                margin-right: 8px;
                margin-bottom: 8px;
                cursor: pointer;
            }
        }

        .mockups-choose-mockup {
            display: flex;
            flex-direction: column;
            margin-right: 12px;

            .template-preview {
                width: 128px;
                height: 128px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #ebebeb;
                box-sizing: border-box;
                overflow: hidden;
                cursor: pointer;
            }

            &>button {
                width: 128px;
                height: 28px;
                font-size: 14px;
                margin-top: 12px;
                border-radius: 4px;
            }
        }

        .mockups-choose-size {
            width: 100%;
            max-width: 562px;
            box-sizing: border-box;
            padding: 0 10px;
            margin-top: 32px;
            margin-top: 32px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #555555;
            line-height: 16px;
            text-decoration: underline;
            cursor: pointer;
            pointer-events: none;
            opacity: 0;

            &[visible] {
                opacity: 1;
                pointer-events: all;
            }

            &:hover {
                color: #ea4c89;
            }
        }

        &[active] {
            left: 0;
            opacity: 1;
            pointer-events: all;

            &::after {
                margin-left: 0;
            }
        }
    }

    .mockups-selected {
        width: 50%;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        box-sizing: border-box;
        padding: 32px 0;

        &>h3 {
            display: flex;
            align-items: center;
            font-family: Roboto-Medium, Roboto;
            line-height: 18px;
            justify-content: space-between;
            width: 100%;
            max-width: 456px;

            strong {
                font-size: 16px;
                color: #000000;
                font-weight: 500;
            }

            span {
                display: flex;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;

                b {
                    font-weight: 400;

                    &::before {
                        content: '/';
                    }
                }

                em[error] {
                    color: #f44336;
                }
            }

            svg {
                width: 14px;
                height: 14px;
                background-color: #ababab;
                fill: #fff;
                border-radius: 14px;
                cursor: pointer;
                margin-left: 6px;
            }
        }
    }

    .mockups-selected-wapper {
        margin: 16px 0 0;
        display: flex;
        position: relative;
        flex: 1;
        flex-direction: column;
        justify-content: flex-start;
        max-width: 472px;
        width: 100%;
        max-height: 544px;

        .mockups-selected-scroller {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            max-height: 100%;
            padding: 4px;
            box-sizing: border-box;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;

            &>blockquote {
                width: calc(25% - 8px);
                margin: 4px;
                padding: 0;
                overflow: hidden;
                position: relative;
                border-radius: 4px;
                box-sizing: border-box;
                border: 1px solid #ebebeb;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    z-index: 1;
                    background-color: rgba(0, 0, 0, 0.2);
                    transition: opacity 0.5s;
                    opacity: 0;
                }

                &>a {
                    position: absolute;
                    z-index: 2;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    box-sizing: border-box;
                    white-space: nowrap;
                    padding: 0 6px;
                    height: 24px;
                    background: #ffffff;
                    border-radius: 12px;
                    font-size: 12px;
                    line-height: 24px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #555555;
                    cursor: pointer;
                    opacity: 0;
                    transition: opacity 0.5s;

                    &:hover {
                        color: #ea4c89;
                    }
                }

                &>del {
                    position: absolute;
                    top: 6px;
                    right: 8px;
                    width: 16px;
                    height: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 1px;
                    box-sizing: border-box;
                    background-color: #fff;
                    border-radius: 18px;
                    z-index: 2;
                    opacity: 0;
                    transition: opacity 0.5s;
                    cursor: pointer;

                    svg {
                        vertical-align: top;
                        width: 12px;
                        height: 12px;
                        color: #555;
                    }

                    &:hover svg {
                        color: #ea4c89;
                    }
                }

                &>cite {
                    display: none;
                }

                &:hover {
                    &::before {
                        opacity: 1;
                    }

                    &>a {
                        opacity: 1;
                    }

                    &>del {
                        opacity: 1;
                    }
                }

                &:first-child {
                    a {
                        display: none;
                    }

                    &::after {
                        content: 'Primary image';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 22px;
                        padding: 0;
                        z-index: 1;
                        line-height: 22px;
                        background: rgba(0, 0, 0, 0.7);
                        border-radius: 0px 0px 3px 3px;
                        text-align: center;
                        font-size: 12px;
                        font-family: Roboto-Regular, Roboto;
                        font-weight: 400;
                        color: #ffffff;
                    }
                }
            }

            &[count='1']>blockquote {
                &::before {
                    display: none;
                }

                &>del {
                    display: none;
                }
            }
        }

        .mockups-selected-nodata {
            position: absolute;
            left: 8px;
            top: 0;
            right: 8px;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #919191;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #919191;
            line-height: 12px;

            &::after {
                content: 'None';
            }

            svg {
                width: 48px;
                height: 48px;
                margin-bottom: 8px;
                fill: #d9d9d9;
            }
        }

        .mockups-selected-notify {
            position: absolute;
            left: 4px;
            top: 4px;
            right: 4px;
            bottom: 4px;
            background: rgba($color: #000000, $alpha: 0.2);
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;

            cite {
                background: #ffffff;
                box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.18);
                border-radius: 6px;
                padding: 16px;
                display: flex;
                margin: 0 18px;
                align-items: center;

                img {
                    width: 24px;
                    height: 24px;
                }

                span {
                    margin: 0 12px;
                    font-size: 14px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #f44336;
                    line-height: 18px;
                }

                button {
                    height: 32px;
                    width: 68px;
                    font-size: 14px;
                }
            }

            &.active {
                opacity: 1;
                pointer-events: all;
            }
        }

        &[type='preview']>.mockups-selected-scroller>blockquote {

            &::before,
            &::after,
            &>a,
            &>del {
                display: none;
            }

            &>cite {
                display: block;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

            &:hover {
                box-shadow: 0 0 1px 1px #f6b2cd;
                border-color: #f6b2cd;
            }
        }
    }

    .mockups-selected-action {
        margin-top: 24px;
        width: 100%;
        max-width: 456px;
        height: 36px;

        button {
            width: 160px;
            height: 36px;
        }
    }
}

.mockups-exit {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 14px 14px;

    figure {
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #000000;
        line-height: 20px;
        text-align: center;

        strong {
            color: #000000;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            margin-bottom: 8px;
        }

        span {
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            line-height: 22px;
        }
    }

    fieldset {
        display: flex;
        flex-direction: column;
        width: 100%;

        button+button {
            margin-top: 8px;
        }
    }
}
</style>
